<template>
  <div class="login">
    <el-button class="regsiter-button" @click="switchToRegsiter"
      >Register</el-button
    >
    <div class="logo"><h1>R</h1></div>

    <h1 class="wbc-gin">Welcome back please Sign in</h1>

    <el-form ref="loginForm" :model="ForMate">
      <el-form-item>
        <el-input placeholder="Username" v-model="ForMate.username"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="Password" v-model="ForMate.password" show-password> </el-input>
      </el-form-item>
      <el-button class="login-button"  type="primary" @click="handleLogin">Login</el-button>
    </el-form>
  </div>
</template>

<script>

import {login_api} from "@/api/user";

export default {
  name: "Login",
  data(){
    return {
      ForMate:{
        username:"",
        password:""
      }
    }
  },
  methods: {
    switchToRegsiter() {
      this.$emit("switch-to-register");
    },
    async handleLogin(){
      if (!this.ForMate.username || !this.ForMate.password){
        this.$message.error("Please input username and password")
      }

      try{
        const response = await login_api(this.ForMate)
        console.log("响应过来的数据",response);
        
        if (response.status === 200){
          const token = 'example_token'
          this.$store.commit('setToken',token)
          localStorage.setItem('token',token)
          this.$message.success("Login success")
          this.$router.push('/')
        } 
      }catch(error){
        this.$message.error('登陆账号密码错误')
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.regsiter-button {
  position: absolute; // 绝对定位
  top: 40px; // 距离顶部 40px
  right: 50px; // 距离右边 50px
  border: none; // 无边框
  font-weight: 700; // 加粗
  color: #222; // 字体颜色
}

.logo {
  font-size: 50px; // 字体大小
}


.wbc-gin {
  font-size: 30px; // 字体大小
}

.login-button {
  margin-top: 20px; // 顶部间距
  width: 350px; // 宽度
}

.login-button > span {
  background-color: red; // 背景色
}
</style>
